<template>
  <div>
    <h1>个人简历</h1>
    <div style="margin-bottom: 16px" >
      <a-input-search v-model=sid placeholder="input search text" style="width:300px" @search="onSearch(sid)">
      <a-button slot="enterButton">
        搜索
      </a-button>
    </a-input-search>
      <div>
          <a-modal v-model="visible" :title="curdata.linkman" @ok="handleOk">
              <p>{{curdata}}</p>
          </a-modal>
      </div>
      <div>
          <a-modal v-model="visible1"  @ok="handleOk">
              <p>{{seadata}}</p>
          </a-modal>
      </div>
      <a-button class="editable-del-btn" @click="Ondelect">
      全部删除
    </a-button>
      <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">
        重选
      </a-button>
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `选择 ${selectedRowKeys.length} 条数据` }}
        </template>
      </span>
    </div>
      <div id="components-modal-demo-position">
      <a-button type="primary"  @click="() => (modal2Visible = true)">
        增加
      </a-button>     
      <a-modal
        v-model="modal2Visible"
        title="添加用户信息"
        centered
        @ok="adddata"
      >
        <div>
          <p>姓名:<input type="text" v-model="zhang" style="margin-left:37px;width: 180px;"></p>
          <p>员工号:<input type="text" v-model="jian" style="margin-left:24px;width: 180px;"></p>
          <p>部门:<input type="text" v-model="qin" style="margin-left:37px;width: 180px;"></p>
        </div>
      </a-modal>
    </div>     
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="data"
    >
    <a slot="action" slot-scope="record" @click="showModal(record.ID)">审批</a>
    <a slot="actionOne" slot-scope="record" @click="deleteIt(record.ID)">删除</a>
    <!-- <a slot="actionTwo" slot-scope="record" @click="edit(record.ID)">修改</a> -->
    </a-table>
  </div> 
</template>
<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'number',
  },
  {
    title: '状态',
    dataIndex: 'state',
  },
  {
    title: '账号',
    dataIndex: 'ID',
  },
  {
    title: '姓名',
    dataIndex: 'linkman',
  },
  {
    title: '身份证明',
    dataIndex: 'phone',
  },
  {
    title: '出生年月',
    dataIndex: 'date',
  },
  {
    title: '学历',
    dataIndex: 'company',
  },
  {
    title: '专业',
    dataIndex: 'money',
  },
  {
    title: '毕业学校',
    dataIndex: 'setdate',
  },
  {
    title: '工作年限',
    dataIndex: 'scale',
  },
  {
    title: '所在城市',
    dataIndex: 'city',
  },
  {
    title: '',
    key: 'operation',
    fixed: 'right',
    scopedSlots: { customRender: 'action' },
    modal2Visible: false,
  },
  {
    title: '',
    key: 'operation-One',
    fixed: 'right',
    scopedSlots: { customRender: 'actionOne' },
    modal2Visible: false,
    visible: false,
  },
   {
    title: '',
    key: 'operation-Two',
    fixed: 'right',
    scopedSlots: { customRender: 'actionTwo' },
    modal2Visible: false,
    visible: false,
  },
];

// const data = [];
// for (let i = 1; i < 50; i++) {
//   data.number = i
// }

export default {
  data() {
    return {
      data: [
        {
          number:"1",
          state: "未审核",
          ID: 12345,
          linkman: "张三"
        },
        {
          number:"2",
          state: "未审核",
          ID: 123456445,
          linkman: "李四"
        },
        {
          number:"3",
          state: "未审核",
          ID: 125464,
          linkman: "王五"
        },
        {
          number:"4",
          state: "未审核",
          ID: 1828124061,
          linkman: "lllbj"
        }
        ],
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      visible: false,
      visible1: false,
      curdata:'',
      seadata:'',
      modal2Visible: false,
      index: 5,
      flag:false,
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  methods: {
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    setModal1Visible(modal1Visible) {
      this.modal1Visible = modal1Visible;
      console.log(modal1Visible);
    },
    adddata(){
      this.data.push({
          number: this.index++,
          state: "未审核",
          ID: this.zhang,
          linkman: this.jian,
          phone:this.qin
      });
      this.modal2Visible = false;
    },
    // onSelectChange(selectedRowKeys) {
    //   console.log('selectedRowKeys changed: ', selectedRowKeys);
    //   this.selectedRowKeys = selectedRowKeys;
    // },
    showModal(curID) {
      this.visible = true;
      let curData = this.data.filter((item) => item.ID === curID)[0];
      this.curdata = curData;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
      this.visible1=false;
      this.editIt(this.curdata.ID); 
    },
    onSearch(sid) {
      this.visible1 = true;
      let seaData = this.data.filter((item) => item.ID == sid)[0];
      this.seadata = seaData;
    },
    editIt(id) {
        for(let i=0;i<this.data.length;i++) {
          if(this.data[i].ID === id) {
              this.data[i].state = "已审核";
          }
      }
    },
    Ondelect(ID){
      const data = [...this.data]
      this.data = data.filter(item => item.ID === ID)
    },
    deleteIt(id) {
    this.data = this.data.filter((item) => item.ID !== id)
    },
    test () {
      this.data.forEach((item,index) => {
        item.number = index
      })
    }
  },
   Ondelect(ID){
      const data = [...this.data]
      this.data = data.filter(item => item.ID === ID)
    },
     
   edit(index) {
      //点击修改
      
      this.flag = true;
      var updateData = this.data[index];
      this.data = updateData.number;
      this.val = updateData.id;
    },

}
</script>

